<template>
  <div class="article-list" ref="articleList" @scroll="onScroll">
    <!-- 
        load事件绑定的onLoad方法，是专门用来加载数据的方法
            它会在页面一打开，并且数据没铺满时调用
            当你上拉到快结束，还会自动再调用

            onLoad方法还必须满足两个条件才能调用
                当 loading 和 finished 都为false才调用

        finished代表标记是否全部加载完毕
            如果为true，代表全部加载完，就不会调用onLoad了
            如果为false,onLoad才能去调用加载数据
            所以要注意：如果确实如果全部加载完了，记得要把finished改为true

        v-model绑定的loading标记当前是否正在加载中
            如果为true，代表数据还在加载，不能调用onLoad
            如果为false，代表数据没在加载，可以调用onLoad加载新的数据

            默认要给false，否则页面一启动就显示加载中，一次都不会调用onLoad

            它为false后，会自动调用onLoad，onLoad一旦调用会自动把loading改为true


        总结：
            加载数据写到 `onLoad` 里面
            如果这次加载完了，记得要把`loading`改为false
            还要判断是否全部加载完毕，全部加载完毕把 `finished`改成true
     -->
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 用van-cell的自定义插槽 -->
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push(`/article?id=${item.art_id}`)"
        >
          <template>
            <!-- 标题 -->
            <div class="title">{{ item.title }}</div>
            <!-- 宫格 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item v-for="(pic, i) in item.cover.images" :key="i">
                <van-image :src="pic" />
              </van-grid-item>
            </van-grid>
            <!-- 作者信息，评论数量，发表时间 -->
            <div class="info-box">
              <div>
                <span>{{ item.aut_name }}</span
                ><span>{{ item.comm_count }}评论</span
                ><span>{{ item.pubdate | relvTime }}</span>
              </div>
              <van-icon name="cross" />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from '@/api/article'
export default {
  props: {
    channel_id: {
      //限制必传
      required: true,
      //限制类型
      type: Number
    }
  },
  data () {
    return {
      //下拉刷新的变量
      pullLoading: false,
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      //记录页面滚动条的标量
      scrollTop: 0
    };
  },
  activated () {
    // console.log('显示了')
    this.$refs.articleList.scrollTop = this.scrollTop
  },
  methods: {
    //下拉加载的方法
    //list的滚动事件
    onScroll () {
      // console.log(e)
      // console.log(this.$refs.articleList.scrollTop)
      this.scrollTop = this.$refs.articleList.scrollTop
    },
    async onRefresh () {
      //发送请求
      // console.log('first')
      const res = await articleListAPI({
        channel_id: this.channel_id,
        //拿到最新的数据，相当于刷新所以写死时间戳
        timestamp: Date.now()
      })
      // console.log( res)
      //发送数据成功把加载状态改掉
      this.pullLoading = false
      this.list = res.data.results
      //往下翻的时候需要加载下一页的数据所以需要把上一个时间戳存起来
      this.timestamp = res.data.pre_timestamp
      //此时相当于新闻是完整重新开始的，所以应该把全部加载的标记设置为false
      this.finished = false

    },
    async onLoad () {
      //页面一打开没有铺满屏幕会自动调用
      //需要channel_id和timestamp
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })
      console.log(res)
      //保存本次得到的上一个时间段的时间戳
      this.timestamp = res.data.pre_timestamp

      //展开依次放入list
      this.list.push(...res.data.results)

      this.loading = false

      //判断是否加载完成
      if (this.timestamp == null) {
        this.finished = true
      }
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      /* setTimeout(() => {

        // 循环10次
        for (let i = 0; i < 10; i++) {
          // 就加了10个数字到数组（1-10）
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束(代表本次加载完毕，可以继续加载新的数据)
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000); */
    },
  },
};
</script>

<style lang="less" scoped>
.info-box {
  color: gray;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 12px;

    &:nth-child(2) {
      margin: 0 10px;
    }
  }
}
</style>